import { defineComponent } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import BrandDetails from "@/components/BrandDetails";
import CardView from "@/components/CardView";
import ExpandMore from "@/components/ExpandMore";
import GoodsListItem from "@/components/GoodsListItem";
import { Grid, GridItem } from "vant";

import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { getSize } from "@/command/apiTool";
import { useRequest } from "./request";
import DetailedInfo from "@/components/DetailedInfo";
import { ILabelProps } from "@/components/Label/types";
import { useRouter } from "vue-router";
import * as vant from "vant";
const { showFailToast } = vant;

export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const { plantTypeList, detailinfo, suggestList } = useRequest();
    const render1 = () => {
      const labels: ILabelProps[] = [
        {
          name: "结队大户",
          type: "tag",
        },
      ];
      return (
        <div class={"mb-[10px]"}>
          <img src={detailinfo.value.logoUrl} class="w-full h-[206px]" />
          <DetailedInfo
            {...detailinfo.value}
            labels={labels}
            title={detailinfo.value.name}
            desc={detailinfo.value.address}
            text={detailinfo.value.entityComment}
          />
          {/* <BrandDetails
            data={{
              name: detailinfo.value.name,
              introduce: detailinfo.value.entityComment,
              majorName: "xxx",
              address: detailinfo.value.address,
              distance: detailinfo.value.distance,
            }}
          /> */}
        </div>
      );
    };
    const render2 = () => {
      return (
        <CardView
          // class={"bg-[red]"}
          radius={0}
          right={() => (
            <span
              class="blue-text"
              onClick={() => router.push("/brandEncyclopedia")}
            >
              查看
            </span>
          )}
          title="品种百科"
        />
      );
    };
    const renderItem = (e: any) => {
      const rightBody = () => {
        return <div class="text-[14px] text-[#666]">{e.comment}</div>;
      };
      return (
        <GoodsListItem
          class="variety-xh-item"
          title={e.name}
          img={e.img}
          v-slots={{ rightBody: rightBody }}
        />
      );
    };
    const render4 = () => {
      return (
        <CardView title="所选品种" radius={0}>
          {plantTypeList.value.map((e: any) => {
            return renderItem(e);
          })}
        </CardView>
      );
    };
    const render5 = () => {
      let data = suggestList.value.map((e: any) => {
        return {
          name: e.name,
          img: e.img,
          scale: e.scale,
          id: e.id,
        };
      });
      return (
        <CardView
          radius={0}
          title="智能推荐"
          class="mb-[60px]"
          right={() => (
            <div
              class="blue-text"
              onClick={() => router.push("/intelligentRecommendation")}
            >
              查看更多
            </div>
          )}
        >
          <Grid columnNum={2} gutter="10" border={true}>
            {data.map((e) => {
              console.log("品种id", e.id);

              return (
                <GridItem
                  onClick={() => router.push(`varietyDetails?id=${e.id}`)}
                >
                  <img src={e.img} class="w-full h-[105px]" />
                  <div class="w-full h-[25px] mt-[10px] text-[#333] text-[14px]">
                    {e.name}
                  </div>
                  <div class="w-full mt-[20px] text-[#999] text-[12px]">
                    {e.scale}农户选择
                  </div>
                </GridItem>
              );
            })}
          </Grid>
        </CardView>
      );
    };
    const render6 = () => {
      const data: IButtonGroupViewData[] = [
        {
          text: "咨询大户",
          childClass: "!h-[40px]",
          style: {
            background: "#FFFFFF",
            border: "1px solid #E6E6E6",
            width: getSize(165),
            borderRadius: getSize(25),
            height: getSize(40),
            color: "#333333",
          },
          toChatData: {
            to: detailinfo.value.phone,
            name: detailinfo.value.name,
          },
        },
        {
          text: "申请代购",
          childClass: "!h-[40px]",
          style: {
            width: getSize(165),
            background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
          },
          onClick: () => {
            /* id未返回 */
            router.push(`/seedPurchase?id=${detailinfo.value.userId}`);
          },
        },
      ];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px] z-50"
          style={{ boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);" }}
        >
          <ButtonGroupView data={data} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="帮选品种" childClass="!p-[0px] m-child-top-20">
          {render1()}
          {render2()}
          {render4()}
          {render5()}
          {render6()}
        </PageTitle>
      );
    };
  },
});
